import React from 'react';
import './index.css'

function TodoFooter(props) {
    const {todoList,dispatch} = props
    const doneLens = todoList.reduce((pre,todo)=>todo.isRequired? pre+1:pre,0)
    const length = todoList.length
    let flag = false
    if(doneLens===length&&doneLens!==0){
        flag = true
    }
    return (
        <div className="todo-footer">
            <label>
                <input type="checkbox" checked={flag} onChange={()=>dispatch({type:'ALL_CHANGE',payload:!flag})}/>
            </label>
            <span>已完成{doneLens} / 全部{length}</span>
            <button className="btn btn-danger" style={{display:doneLens>0? 'block':'none'}} onClick={()=>dispatch({type:'DELETE_SELECTED',payload: null})}>清除已完成任务</button>
        </div>
    );
}

export default TodoFooter;